<template>
  <view class="form-page">
    <view class="form-card">
      <!-- 项目基本信息 -->
      <view class="section-header">
        <text class="section-title">项目基本信息</text>
      </view>
      
      <!-- 项目名称 -->
      <view class="form-item">
        <text class="label">项目名称</text>
        <input 
          v-model="form.project_name" 
          class="input" 
          placeholder="请输入项目名称"
        />
      </view>

      <!-- 客户名称 -->
      <view class="form-item">
        <text class="label">客户名称</text>
        <input 
          v-model="form.customer_name" 
          class="input" 
          placeholder="请输入客户名称"
        />
      </view>

      <!-- 负责人电话 -->
      <view class="form-item">
        <text class="label">负责人电话</text>
        <input 
          v-model="form.manager_phone" 
          class="input" 
          type="number"
          placeholder="请输入负责人电话"
        />
      </view>

      <!-- 现场管理人 -->
      <view class="form-item">
        <text class="label">现场管理人</text>
        <input 
          v-model="form.site_manager" 
          class="input" 
          placeholder="请输入现场管理人"
        />
      </view>

      <!-- 现场负责人电话 -->
      <view class="form-item">
        <text class="label">现场负责人电话</text>
        <input 
          v-model="form.site_manager_phone" 
          class="input" 
          type="number"
          placeholder="请输入现场负责人电话"
        />
      </view>

      <!-- 客户来源 -->
      <view class="form-item">
        <text class="label">客户来源</text>
        <picker 
          mode="selector" 
          :range="customerSourceOptions" 
          :value="customerSourceIndex"
          @change="onCustomerSourceChange"
        >
          <view class="picker">
            <text>{{ form.customer_source || '请选择客户来源' }}</text>
          </view>
        </picker>
      </view>

      <!-- 客户等级 -->
      <view class="form-item">
        <text class="label">客户等级</text>
        <picker 
          mode="selector" 
          :range="customerLevelOptions" 
          :value="customerLevelIndex"
          @change="onCustomerLevelChange"
        >
          <view class="picker">
            <text>{{ form.customer_level || '请选择客户等级' }}</text>
          </view>
        </picker>
      </view>

      <!-- 跟进状态 -->
      <view class="form-item">
        <text class="label">跟进状态</text>
        <picker 
          mode="selector" 
          :range="followStatusOptions" 
          :value="followStatusIndex"
          @change="onFollowStatusChange"
        >
          <view class="picker">
            <text>{{ form.followStatus || '请选择跟进状态' }}</text>
          </view>
        </picker>
      </view>

      <!-- 生成工地 -->
      <view class="form-item">
        <text class="label">生成工地</text>
        <input 
          v-model="form.input_address" 
          class="input" 
          placeholder="请输入生成工地"
        />
      </view>

      <!-- 生产量 -->
      <view class="form-item">
        <text class="label">生产量</text>
        <input 
          v-model="form.production_quantity" 
          class="input" 
          type="number"
          placeholder="请输入生产量"
        />
      </view>

      <!-- 产品型号 -->
      <view class="form-item">
        <text class="label">产品型号</text>
        <input 
          v-model="form.product_model" 
          class="input" 
          placeholder="请输入产品型号"
        />
      </view>

      <!-- 备注信息 -->
      <view class="form-item">
        <text class="label">备注信息</text>
        <textarea 
          v-model="form.remark" 
          class="textarea" 
          placeholder="请输入备注信息"
        />
      </view>

      <!-- 保存按钮 -->
      <button class="save-btn" @click="save">保存项目</button>
    </view>
  </view>
</template>

<script>
import { updateFinanceProject } from '@/api/sale/customer.js'

export default {
  data() {
    return {
      id: null,
      form: {
        project_name: '',
        customer_name: '',
        manager_phone: '',
        site_manager: '',
        site_manager_phone: '',
        customer_source: '',
        customer_level: '',
        followStatus: '',
        input_address: '',
        production_quantity: '',
        product_model: '',
        remark: ''
      },
      customerSourceOptions: ['线上', '线下', '转介绍', '其它'],
      customerLevelOptions: ['A', 'B', 'C', '未知'],
      followStatusOptions: ['待跟进', '跟进中', '已签约', '异常']
    }
  },
  computed: {
    customerSourceIndex() {
      return this.customerSourceOptions.findIndex(item => item === this.form.customer_source);
    },
    customerLevelIndex() {
      return this.customerLevelOptions.findIndex(item => item === this.form.customer_level);
    },
    followStatusIndex() {
      return this.followStatusOptions.findIndex(item => item === this.form.followStatus);
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = Number(options.id);
      
      // 如果传递了数据，直接使用
      if (options.data) {
        try {
          const itemData = JSON.parse(decodeURIComponent(options.data));
          this.form = { ...this.form, ...itemData };
        } catch (error) {
          console.error('解析传递数据失败:', error);
          this.initDefaultForm();
        }
      } else {
        this.initDefaultForm();
      }
    } else {
      // 新增时，初始化表单数据
      this.initDefaultForm();
    }
  },
  methods: {
    initDefaultForm() {
      this.form = {
        project_name: '',
        customer_name: '',
        manager_phone: '',
        site_manager: '',
        site_manager_phone: '',
        customer_source: '',
        customer_level: '',
        followStatus: '待跟进',
        input_address: '',
        production_quantity: '',
        product_model: '',
        remark: ''
      };
    },
    
    onCustomerSourceChange(e) {
      this.form.customer_source = this.customerSourceOptions[e.detail.value];
    },
    
    onCustomerLevelChange(e) {
      this.form.customer_level = this.customerLevelOptions[e.detail.value];
    },
    
    onFollowStatusChange(e) {
      this.form.followStatus = this.followStatusOptions[e.detail.value];
    },
    
    // 保存项目
    async save() {
      // 表单验证
      if (!this.form.project_name.trim()) {
        uni.showToast({ title: '请输入项目名称', icon: 'none' });
        return;
      }
      if (!this.form.customer_name.trim()) {
        uni.showToast({ title: '请输入客户名称', icon: 'none' });
        return;
      }
      if (!this.form.manager_phone.trim()) {
        uni.showToast({ title: '请输入负责人电话', icon: 'none' });
        return;
      }
      if (!this.form.site_manager.trim()) {
        uni.showToast({ title: '请输入现场管理人', icon: 'none' });
        return;
      }
      if (!this.form.site_manager_phone.trim()) {
        uni.showToast({ title: '请输入现场负责人电话', icon: 'none' });
        return;
      }
      if (!this.form.customer_source) {
        uni.showToast({ title: '请选择客户来源', icon: 'none' });
        return;
      }
      if (!this.form.customer_level) {
        uni.showToast({ title: '请选择客户等级', icon: 'none' });
        return;
      }
      if (!this.form.followStatus) {
        uni.showToast({ title: '请选择跟进状态', icon: 'none' });
        return;
      }
      if (!this.form.input_address.trim()) {
        uni.showToast({ title: '请输入生成工地', icon: 'none' });
        return;
      }
      if (!this.form.production_quantity.trim()) {
        uni.showToast({ title: '请输入生产量', icon: 'none' });
        return;
      }
      if (!this.form.product_model.trim()) {
        uni.showToast({ title: '请输入产品型号', icon: 'none' });
        return;
      }

      try {
        uni.showLoading({ title: '保存中...' });
        
        // 调用保存API
        const { 
          followStatus, 
          payment_plan_error, 
          payment_plan_success, 
          payment_plan_total, 
          payment_plan_total_amount, 
          ...formData 
        } = this.form; // 解构出不需要的字段，不传递给API
        const params = {
          id: this.id,
          ...formData
        };
        
        const result = await updateFinanceProject(params);
        
        if (result.statusCode === 200 && result.data && result.data.code === 1) {
          uni.hideLoading();
          uni.showToast({ title: '保存成功', icon: 'success' });
          
          // 延迟返回财务列表页面
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/finance/index'
            });
          }, 1500);
        } else {
          uni.hideLoading();
          uni.showToast({ title: result.data?.msg || '保存失败', icon: 'none' });
        }
        
      } catch (error) {
        uni.hideLoading();
        console.error('保存失败:', error);
        uni.showToast({ title: '保存失败，请重试', icon: 'none' });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 30rpx;
  box-sizing: border-box;
}

.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40rpx 0 20rpx 0;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.add-node-btn {
  background: #409eff;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  border: none;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.input,
.picker,
.textarea {
  width: 100%;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background: #fafafa;
  box-sizing: border-box;
  min-height: 80rpx;
}

.picker {
  height: 80rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.picker text {
  flex: 1;
  font-size: 28rpx;
}

.textarea {
  height: 120rpx;
  resize: none;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.node-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.node-item {
  border: 1rpx solid #f0f0f0;
  border-radius: 12rpx;
  padding: 20rpx;
  background: #fafafa;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.node-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.delete-node-btn {
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  border: none;
}

.node-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.node-input-group {
  display: flex;
  gap: 16rpx;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.input-label {
  font-size: 24rpx;
  color: #666;
}

.node-input,
.node-picker {
  width: 100%;
  height: 60rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 26rpx;
  background: #fff;
  display: flex;
  align-items: center;
}

.node-picker text {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.upload-section {
  margin-bottom: 30rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.file-item {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.file-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-file-btn {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  background: #f56c6c;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.upload-btn {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.upload-icon {
  font-size: 40rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 20rpx;
  color: #999;
}

.save-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: #409eff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: none;
  margin-top: 30rpx;
}
</style> 